<template>
  <view class="caregory">
    <view class="clothespress-header">
      <view class="caregory-box">
        <h2>我的衣橱</h2>
        <view class="caregory-box-content">
          <span
            class="sings"
            :class="{ active: activeKey === 'single' }"
            @click="activeKey = 'single'"
            >单品</span
          >
          <span
            class="sings"
            :class="{ active: activeKey === 'match' }"
            @click="activeKey = 'match'"
            >搭配</span
          >
        </view>
        <view class="clothes-category-box-content">
          <view class="clothes-left">
            <view class="clothes-left-text">衣橱管理</view>
            <uni-icons type="down" size="20" color="#999"></uni-icons>
          </view>
          <view class="clothes-right">
            <uni-icons
              type="search"
              color="#92beab"
              size="24"
              @click="handleSearchClick"
            />
            <uni-icons type="list" size="20" color="#92beab;"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="clothes-category-box">
      <SingleItem
        v-if="activeKey === 'single'"
        :categoryBoxHeight="categoryBoxHeight"
      />
      <MatchItem v-else />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import SingleItem from "./components/SingleItem.vue";
import MatchItem from "./components/MatchItem.vue";

// 系统信息获取
const { safeArea } = uni.getSystemInfoSync();
const safeAreaPadding = ref(safeArea?.top ?? 0);
const BoxHeight = ref(safeArea?.height ?? 0);

let navHeight = 44; // H5 默认导航栏高度
// #ifdef MP-WEIXIN
const res = uni.getMenuButtonBoundingClientRect();
navHeight = res.height;
// #endif
const categoryBoxHeight = ref(
  BoxHeight.value - safeAreaPadding.value - navHeight - 182
);

const activeKey = ref("single");

// 搜索点击事件
const handleSearchClick = () => {
  uni.navigateTo({
    url: "/pages/clothespress/search/search",
  });
};

// 生命周期钩子
onLoad(async () => {
  // 主组件初始化逻辑
});
</script>

<style lang="scss" scoped>
@import "./index.scss";
</style>
